import React, { ReactElement } from 'react';
import { ViewStyle } from 'react-native';
import { Surface, Shape, Path } from '@react-native-community/art';

interface CornerProps {
  width: number;
  height: number;
  style?: ViewStyle | ViewStyle[];
  dia: number;
  fillColor?: string;
}

export default ({
  width,
  height,
  dia,
  style,
  fillColor = '#F3F3F3'
}: CornerProps): ReactElement => {
  const leftTop = new Path()
    .moveTo(0, dia)
    .arc(dia, -dia, dia)
    .lineTo(0, 0)
    .close();

  const rightTop = new Path()
    .moveTo(width - dia, 0)
    .arc(dia, dia, dia)
    .lineTo(width, 0)
    .close();

  const leftBottom = new Path()
    .moveTo(dia, height)
    .arc(-dia, -dia, dia)
    .lineTo(0, height)
    .close();

  const rightBottom = new Path()
    .moveTo(width, height - dia)
    .arc(-dia, dia, dia)
    .lineTo(width, height)
    .close();
  return (
    <Surface width={width} height={height} style={style}>
      <Shape d={leftTop} fill={fillColor} />
      <Shape d={rightTop} fill={fillColor} />
      <Shape d={leftBottom} fill={fillColor} />
      <Shape d={rightBottom} fill={fillColor} />
    </Surface>
  );
};
